<template>
    <div>
        <el-carousel height="400px">
            <el-carousel-item v-for="item in img_list" :key="item.id">
                <router-link :to="item.link">
                    <img :src="item.img">
                </router-link>

            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                img_list: []
            }
        },
        mounted() {
            this.$axios.get(this.$settings.base_url + '/home/banner/').then(item => {
                console.log(item.data)
                this.img_list = item.data
            })
        }

    }
</script>

<style scoped>

    .el-carousel__item {
        height: 400px;
        min-width: 1200px;
    }

    .el-carousel__item img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
</style>